<template>
    <!-- navigator 底部导航-->
    <div class="navigator">
      <span class="navigator_item" @click="goTo('home')">
        <img class="navigator_pic" @mouseover="overImg('home')" @mouseout="outImg('home')" :src="home"/>
        <span :class="{current: currentTab === 'home'}">首页</span>
      </span>
      <span class="navigator_item" @click="goTo('personalCenter')">
        <img class="navigator_pic" @mouseover="overImg('personalCenter')" @mouseout="outImg('me')" :src="me"/>
        <span :class="{current: currentTab === 'me'}">我的</span>
      </span>
      <img src="./assets/icon.png" class="navigator_icon">
    </div>
</template>

<script>
  const ic_home = require('./assets/ic_home.png');
  const ic_home_pre = require('./assets/ic_home_pre.png');
  const ic_me = require('./assets/ic_me.png');
  const ic_me_pre = require('./assets/ic_me_pre.png');

  export default {
    name: 'my_footer',
    props: {
      currentTab: {
        type: String,
        default: 'home'
      }
    },
    data () {
      return {
        home: this.currentTab === 'home' ? ic_home_pre : ic_home,
        me: this.currentTab === 'me' ? ic_me_pre : ic_me,
      }
    },
    methods: {
      goTo(name) {
        this.$openRouter({
          name: name,
        })
      },
      overImg (type) {
        if (type === 'home') {
          return this.home = ic_home_pre;
        } else {
          return this.me = ic_me_pre;
        }
      },
      outImg (type) {
        console.log('type222:', type);
        if (type === 'home') {
          return this.home = ic_home;
        } else {
          return this.me = ic_me;
        }
      }
    },
  }
</script>

<style scoped lang="less">

    @import "../../css/common";

    .navigator {
        position: fixed;
        bottom: 0;
        z-index: 10;
        width: 100%;
        height: 3.333333rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: .033333rem solid @line-color;
        background-color: white;
        .navigator_item {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            .navigator_pic {
                width: 1.4rem;
                height: 1.333333rem;
                margin-right: .4rem;
            }
            .current {
                color: @color_orange;
            }
        }
        .navigator_icon {
          position: fixed;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          z-index: 10;
          width: 88px;
        }
    }

</style>
